<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
	<!-- 01_元素内容操作：元素以及元素内容的部分
		.html()  无参---功能：获取匹配元素中第一元素
			     有参---功能：【设置】将匹配元素集合中所有元素替换为新元素
	特点： 内容  +  元素			
		.val()    无参---功能：表单内元素：input\select生效
			                             获取表单元素中第一元素的内容
			     有参---功能：表单内元素：input\select生效
							    input元素直接显示 value
								select元素不是显示 value
								option 元素中内容：用户显示
								option 元素中zhongvalue值，必须当前sekect中 ，
								option元素value值
								直接赋值：打印select元素对象名称[object Object]
	特点：针对（表单内from元素可以包裹）元素的内容
		.text()         
		            无参--功能：获取匹配元素集合中所有元素的文本内容
					有参--功能：【设置】匹配元素集合中所有元素的文本内容替换
	特点：元素中存在内容 
 -->
			  
<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮-针对html()函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮-针对val()函数-无参</button>
		<input type="text" value="文本真实数据1"/>
		<input type="text" value="文本真实数据2" placeholder="输入框显示效果[提示]"/>
		<button>按钮-针对val()函数-有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem2">lorem3</option>
		</select>
	<h1>text()函数使用</h1>	
	<button class="btn1">按钮-针对text()函数-无参</button>
	<button class="btn2">按钮-针对text()函数-有参</button>	
	<p>lorem4</p>
	<p>lorem5</p>
	<p>lorem6</p>
<script>
	//1.找到类名为btn1的按钮--点击--弹窗内容为三个p元素内容【无参】	
	$(".btn1").click(function(){
		var ptext=$("p").text();
		alert(ptext);
	});
	//2.找到类名为btn2的按钮--点击--lorem4\5\6 改成 “修改文本”  【有参】	
	$(".btn2").click(function(){
		$("p").text("修改文本");
	});		
	
	
	
//	$("button").click(function(){
	//设置元素第一个的值  1.直接设置下拉列表中的value值
//	$("select").val("rem5");
	//设置元素第一个的值  2.给第一个值添加，设置内容
//	var rem=$("select").val();
				
				
	//[object Object] JavaScript中 对象的默认字符串表示形态
	//select元素 对象 输出[object Object]
			
	//value的值：真实数据  option中值：显示数据
	//object Object  测试  无参
	//	alert("val()函数有参："+rem)
	//		});
	//动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来
	// $("button").click(function(){
	/* 注意：js变量名不可以为关键字！    in是关键字 */
	//		var ins=$("input").val();
	//		alert("val()函数无参："+ins)
	//	}); 
			
	//有参：点击按钮--下面有两个span  改成 lorem、lorem
	//	$("button").click(function(){
	//		$("span").html("<span>lorem</span>")
	//	});
			
	//js变量【var i=1】==jq变量    var   变量名=值、元素
	//无参数     html()函数使用
	//var html=$("span").html();
	//BOM方式  打印数据
	//alert("无参数获取第一个元素内容："html); 
		</script>
	</body>
</html>